<script>
export default {
    props: ['level','type','items'],
    render(h) {
        var self = this
        const user = {name:'mausen',age:12}
        // 这里创建了 <header><slot name="header"></slot></header>,<main><slot></slot></main>,<footer><slot name="footer"></slot></footer> 三个插槽
        const slots = [h('header',this.$slots.header),h('main',this.$scopedSlots.default({user})),h('footer',this.$slots.footer)]
        // 这个 test 是我们在 main.js 中定义的全局组件—— test
        // 工厂函数可以创建一个对象，并返回它
        if (this.items.length) {
            return h('test',{
                // class API 和 style API 跟在模板中的使用方法是一样的,使用对象字面量计算属性
                class:{ [this.type]: this.type },
                style: { color: '#ffffff' },
                // HTML attribute
                attrs: { id:'render' },
                // 事件监听器也在 on 里，可以用来监听 vm.$emit
                on: { test: this.nativeClickHandler },
                // 触发子组件的click事件,相当于 @click.native
                // nativeOn: { click: this.nativeClick },
                // 使用 slots,当引用组件是其他组件的子组件的时候就需要指定插槽名
                slot: 'footer',
                // 访问 test 组件中的作用域插槽
                scopedSlots: {
                    // 渲染到 default 插槽中的 div, 这里使用 map 实现 v-for 循环
                    default: props => h('div',{style:{lineHeight:1}},this.items.map(item => h('p',item.name))),
                    // 渲染到 footer 插槽中的 button，相当于 <test v-slot="footer"><button>{{this.type}}</button></test> 或者是 <test><template><button></button></template></test>
                    footer: props => h('button',{style:{fontSize:'20px',borderRadiu:'5px'}},this.type),
                },
                ref: 'myref'
            // 这个 slots ，$slots & $scopedSlots 当子组件没有设置 scopedSlots 的时候，就会生效
            },slots)
        } else {
            return h('input',{
                domProps: {
                    value: this.msg
                },
                on: {
                    // 使用对象方法的话，内部 this 是一个 null
                    click() {
                        console.log(this)
                    },
                    input: (this.input)
                }
            })
        }
    },
    data() {
        return {
            msg:''
        }
    },
    mounted() {
        
    },
    methods: {
        nativeClick() {
            console.log('为组件添加的点击事件')
        },
        nativeClickHandler(e) {
            this.$emit('test','value of render')
        },
        input(e) {
            this.msg = e.target.value
            this.$emit('input',e.target.value)
        }
    }
}
</script>
<style scoped>
button {
    color: #fff;
    border: none;
}
#render {
    background-color: #1f1f1d;
}
</style>